import React, { useEffect, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Mentions,
    Select,
    TreeSelect,
    Image,
    message
} from 'antd';
import { getBookList } from '@/api/book';
import { useRouter } from 'next/router';
import style from './index.module.css'
import Content from '../Content';
import { getUserList } from '@/api/user';
import { BorrowAdd, BorrowUpdate } from '@/api/borrow';
import { log } from 'console';

export default function BorrowForm({ title, editData }: { title: string, editData: any }) {
    const [form] = Form.useForm();
    const router = useRouter();
    const [user_options, setUer_options] = useState([]);
    const [book_options, setBook_options] = useState([]);
    const [stock, setStock] = useState(0);
    const handleSubmit = () => {
        form.validateFields().then(async (values) => {
            if (editData?.id) {
                const res = await BorrowUpdate(values);
                message.success('修改成功');
                router.push('/borrow');
            } else {
                const res = await BorrowAdd(values);
                message.success('创建成功');
                router.push('/borrow');
            }
        });
    }
    useEffect(() => {
        if (editData) {
            const obj = {
                name: editData.book?.name,
                user: editData.user?.name,
                stock: editData.book?.stock
            }
            form.setFieldsValue(obj);
            setStock(editData.book?.stock);
        }
        async function fetchData() {
            const res = await getUserList();
            const userlist = res.data.map((item: any) => {
                return {
                    label: item.nickName,
                    value: item._id
                }
            })
            const bookRes = await getBookList();
            const booklist = bookRes.data.map((item: any) => {
                return {
                    label: item.name,
                    value: item._id,
                    stock: item.stock
                }
            })
            setUer_options(userlist);
            setBook_options(booklist);
        }
        fetchData();

    }, [title, editData])
    const handleChangeBook = (value: any, option: any) => {
        setStock(option.stock)
    }

    return (
        <Content title={title}>
            <Form
                form={form}
                className={style.form}
                // {...formItemLayout}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                variant="filled"
                style={{ maxWidth: 600 }}
                onFinish={handleSubmit}>
                <Form.Item label="书籍名称" name="name" rules={[{ required: true, message: 'Please input!' }]}>
                    <Select placeholder='请输入' allowClear options={book_options} onChange={handleChangeBook} />
                </Form.Item>
                <Form.Item label="借阅用户" name="user" rules={[{ required: true, message: 'Please input!' }]}>
                    <Select placeholder='请输入' allowClear options={user_options} />
                </Form.Item>
                <Form.Item
                    label="书籍库存"
                    name="stock"
                >
                    {stock}
                </Form.Item>
                <Form.Item>
                    <Button disabled={stock <= 0} className={style.btn} type="primary" htmlType="submit">
                        创建
                    </Button>
                </Form.Item>
            </Form>
        </Content>
    )
}
